<template>
  <div>
    <div>
      <el-input class="addPosInput" size="small" placeholder="添加职位" suffix-icon="el-icon-plus" @keydown.enter.native="addPosition" v-model="pos.name">
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="addPosition">添加</el-button>
    </div>
    <div class="posManaMain">
      <el-table
        :data="positions"
        style="width: 80%"
        @selection-change="handleSelectionChange">
        <el-table-column
        type="selection"
        align="center">
        </el-table-column>
        <el-table-column
          type="index"
          label="#"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="职位"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="enabled"
          label="是否启用"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="danger" style="margin-top: 15px" 
      :disabled="this.multipleSelection.length==0"
      @click="deleteMany"
      >批量删除</el-button>

      <el-dialog
        title="编制职位"
        :visible.sync="dialogVisible"
        width="30%">
        <div>
          <el-tag>职位名称</el-tag>
          <el-input v-model="updatePos.name" class="updatePosition"></el-input>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="">确 定</el-button>
          </span>
        </template>
      </el-dialog>
  </div>

</template>

<script>
export default {
  name: "PosMana",
  data () {
    return {
      pos: {
        name: ''
      },
      positions: [],
      dialogVisible: false,
      updatePos: {
        name: ""
      },
      multipleSelection: []
    }
  },
  created () {
    this.initPositions()
  },
  methods: {
    deleteMany () {
      let ids ='?'
      this.multipleSelection.forEach(item => {
        ids += "ids=" + item.id + "&";
      })

      this.deleteRequest('/system/basic/pos/' + ids).then(resp => {
        if (resp) {
          this.initPositions()
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    initPositions () {
      this.getRequest('/system/basic/pos/').then(resp => {
        if (resp) {
          this.positions = resp
        }
      })
    },
    addPosition () {
      if (this.pos.name) {
        this.postRequest('/system/basic/pos/', this.pos).then(resp => {
          if (resp) {
            this.initPositions();
            this.pos.name=''
          }
        })
      } else {
        this.$message.error('添加职位名称不能为空');
      }
    },
    handleEdit (index, data) {
      this.updatePos = data
      this.dialogVisible = true
    },  
    handleDelete (index, data) {
      this.deleteRequest('/system/basic/pos/' + data.id).then(resp => {
        if (resp) {
          this.initPositions()
        }
      })
    }
  }
}
</script>

<style>
.addPosInput {
  width: 300px;
  margin-right: 15px;
}
.updatePosition {
  margin-top: 15px;
}
.posManaMain {
  margin-top: 15px;
}
</style>
